<template>
  <div>
    <div class="baseInfo">
      <div class="section-header">
        <div class="section-mark" style="border-left-color: rgb(35, 98, 251)"></div>
        <div class="section-title">基本信息</div>
      </div>
      <div class="body">
        <a-row :gutter="16">
          <a-col :span="12" v-for="item in baseInfolist" :key="item.id">
            <div class="item">
              <div class="title">{{ item.title }}</div>
              <div class="value">
                <div class="value-editable">
                  <span>{{ item.value }}</span>
                  <span v-if="item.unit">{{ item.unit }}</span>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="baseInfo">
      <div class="section-header">
        <div class="section-mark" style="border-left-color: rgb(35, 98, 251)"></div>
        <div class="section-title">商机明细</div>
      </div>
      <div class="body">
        <a-tabs default-active-key="1" tab-position="left">
          <a-tab-pane key="1" tab="仓储" v-if="dataSource1.length > 0">
            <a-table :scroll="{ y: 200 }" bordered :columns="columns1" :data-source="dataSource1" :pagination="false">
              <span slot="estimatedSalesAmount" slot-scope="text, record">
                {{ record.estimatedSalesAmount | amountFormat }}
              </span>
            </a-table></a-tab-pane
          >
          <a-tab-pane key="2" tab="运输" v-if="dataSource2.length > 0">
            <a-table :scroll="{ y: 200 }" bordered :columns="columns2" :data-source="dataSource2" :pagination="false">
              <span slot="estimatedSalesAmount" slot-scope="text, record">
                {{ record.estimatedSalesAmount | amountFormat }}
              </span>
            </a-table></a-tab-pane
          >
          <a-tab-pane key="3" tab="货代" v-if="dataSource3.length > 0">
            <a-table :scroll="{ y: 200 }" bordered :columns="columns3" :data-source="dataSource3" :pagination="false">
              <span slot="estimatedSalesAmount" slot-scope="text, record">
                {{ record.estimatedSalesAmount | amountFormat }}
              </span>
            </a-table></a-tab-pane
          >
          <a-tab-pane key="4" tab="库购" v-if="dataSource4.length > 0">
            <a-table :scroll="{ y: 200 }" bordered :columns="columns4" :data-source="dataSource4" :pagination="false">
              <span slot="estimatedSalesAmount" slot-scope="text, record">
                {{ record.estimatedSalesAmount | amountFormat }}
              </span>
            </a-table></a-tab-pane
          >
        </a-tabs>
      </div>
    </div>
    <div class="baseInfo">
      <div class="section-header">
        <div class="section-mark" style="border-left-color: rgb(35, 98, 251)"></div>
        <div class="section-title">系统信息</div>
      </div>
      <div class="body">
        <a-row :gutter="16">
          <a-col :span="12" v-for="item in systemInfolist" :key="item.id">
            <div class="item">
              <div class="title">{{ item.title }}</div>
              <div class="value">
                <div class="value-editable">
                  <span>{{ item.value }}</span>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  props: {
    id: String,
    baseInfolist: Array,
    systemInfolist: Array,
  },
  data() {
    return {
      columns1: [
        {
          title: '预计合同标的额(元)',
          key: 'estimatedSalesAmount',
          dataIndex: 'estimatedSalesAmount',
          align: 'center',
          scopedSlots: { customRender: 'estimatedSalesAmount' },
        },
        {
          title: '仓库',
          key: 'inventoryId_dictText',
          dataIndex: 'inventoryId_dictText',
          align: 'center',
        },
        // {
        //   title: '预计入仓时间',
        //   key: 'estimateDate',
        //   dataIndex: 'estimateDate',
        //   align: 'center',
        // },
        {
          title: '冷冻预估(托)',
          key: 'estimatedFreeze',
          dataIndex: 'estimatedFreeze',
          align: 'center',
        },
        {
          title: '冷藏预估(托)',
          key: 'estimatedRefrigerate',
          dataIndex: 'estimatedRefrigerate',
          align: 'center',
        },
        {
          title: '恒温预估(托)',
          key: 'estimatedConstant',
          dataIndex: 'estimatedConstant',
          align: 'center',
        },
        {
          title: '常温预估(托)',
          key: 'estimatedNormal',
          dataIndex: 'estimatedNormal',
          align: 'center',
        },
      ],
      columns2: [
        {
          title: '预计合同标的额(元)',
          key: 'estimatedSalesAmount',
          dataIndex: 'estimatedSalesAmount',
          align: 'center',
          scopedSlots: { customRender: 'estimatedSalesAmount' },
        },
        // {
        //   title: '预计入仓时间',
        //   key: 'estimateDate',
        //   dataIndex: 'estimateDate',
        //   align: 'center',
        // },

        {
          title: '运输类型',
          key: 'transType_dictText',
          dataIndex: 'transType_dictText',
          align: 'center',
        },
        {
          title: '业务执行仓',
          key: 'inventoryId_dictText',
          dataIndex: 'inventoryId_dictText',
          align: 'center',
        },
        {
          title: '运输城市',
          key: 'transCity',
          dataIndex: 'transCity',
          align: 'center',
        },
      ],
      columns3: [
        {
          title: '预计合同标的额(元)',
          key: 'estimatedSalesAmount',
          dataIndex: 'estimatedSalesAmount',
          align: 'center',
          scopedSlots: { customRender: 'estimatedSalesAmount' },
        },
        // {
        //   title: '预计入仓时间',
        //   key: 'estimateDate',
        //   dataIndex: 'estimateDate',
        //   align: 'center',
        // },
        {
          title: '是否贸易代理',
          key: 'tradeTypeId',
          dataIndex: 'tradeTypeId',
          align: 'center',
        },
        {
          title: '货代类型',
          key: 'forwardingType_dictText',
          dataIndex: 'forwardingType_dictText',
          align: 'center',
        },
        {
          title: '口岸',
          key: 'portDesc',
          dataIndex: 'portDesc',
          align: 'center',
        },
        {
          title: '运输方式',
          key: 'shoppingType_dictText',
          dataIndex: 'shoppingType_dictText',
          align: 'center',
        },
        {
          title: '进出口',
          key: 'isImport_dictText',
          dataIndex: 'isImport_dictText',
          align: 'center',
        },
      ],
      columns4: [
        {
          title: '预计合同标的额(元)',
          key: 'estimatedSalesAmount',
          dataIndex: 'estimatedSalesAmount',
          align: 'center',
          scopedSlots: { customRender: 'estimatedSalesAmount' },
        },
        {
          title: '仓库',
          key: 'inventoryId_dictText',
          dataIndex: 'inventoryId_dictText',
          align: 'center',
        },
        // {
        //   title: '预计入仓时间',
        //   key: 'estimateDate',
        //   dataIndex: 'estimateDate',
        //   align: 'center',
        // },
      ],
      dataSource1: [],
      dataSource2: [],
      dataSource3: [],
      dataSource4: [],
      url: {
        list: '/online/api/viewCrmBusinessItemById',
      },
    }
  },
  watch: {
    id(val) {
      this.getBusinessDetail()
    },
  },
  mounted() {
    this.getBusinessDetail()
  },
  methods: {
    handleChange(e) {
      this.res = e.target.value
      const value = e.target.value
      this.$emit('change', value)
    },
    getBusinessDetail() {
      let param1 = {
        id: this.id,
        typeId: '1',
        pageSize: 100,
      }
      let param2 = {
        id: this.id,
        typeId: '2',
        pageSize: 100,
      }
      let param3 = {
        id: this.id,
        typeId: '3',
        pageSize: 100,
      }
      let param4 = {
        id: this.id,
        typeId: '4',
        pageSize: 100,
      }
      getAction(this.url.list, param1).then((res) => {
        this.dataSource1 = res.result || []
      })
      getAction(this.url.list, param2).then((res) => {
        this.dataSource2 = res.result || []
      })
      getAction(this.url.list, param3).then((res) => {
        this.dataSource3 = res.result || []
      })
      getAction(this.url.list, param4).then((res) => {
        this.dataSource4 = res.result || []
      })
    },
  },
}
</script>

<style lang="less" scoped>
// 详细资料
.baseInfo {
  .section-header {
    display: flex;
    align-items: center;

    .section-mark {
      border-left-width: 4px;
      border-left-style: solid;
      height: 14px;
      border-radius: 2px;
    }

    .section-title {
      font-size: 14px;
      color: #333;
      font-weight: 600;
      margin-left: 8px;
      flex-shrink: 0;
    }
    .section-button {
      margin-left: auto;
    }
  }

  .body {
    margin: 10px;
  }
}

.item {
  display: flex;
  align-items: flex-start;
  height: 60px;
  .title {
    width: 100px;
    flex-shrink: 0;
  }
  .value {
    flex: 1;
    .value-edit {
      display: flex;
      align-items: center;
    }
    .value-editable {
      display: flex;
      align-items: center;
    }
  }
}
.baseInfo {
  /deep/.ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 5px 5px !important;
  }
  /deep/ .ant-table-tbody > tr > td {
    padding: 5px 5px !important;
  }
  /deep/.ant-tabs-tabpane {
    padding-bottom: 0;
  }
}
</style>
